<template>
	<view>
		<view
			class="service_item"
			v-for="item in serviceList"
			:key="item.id"
			@tap="toPaymentOrder(item.id)"
		>
			<image :src="item.goods.thumPic" mode=""></image>
			<view class="detail">
				<view class="name xjs-line-one">{{ item.goods.name }}</view>
				<view class="project" v-if="item.petRangeMarkUp.startValue">
					<text class="label">距离 :</text>
					<text class="value">
						{{ item.petRangeMarkUp.startValue }}km外，每超{{
							item.petRangeMarkUp.outValue
						}}km加价{{ item.petRangeMarkUp.upPrice }}元
					</text>
				</view>
				<view class="project" v-if="item.petNumMarkUp.startValue">
					<text class="label">宠物 :</text>
					<text class="value">
						{{ item.petNumMarkUp.startValue }}只外，每多{{
							item.petNumMarkUp.outValue
						}}只加价{{ item.petNumMarkUp.upPrice }}元
					</text>
				</view>
				<view class="btn">
					<view class="price">¥{{ item.minPrice }}起</view>
					<view class="to">去下单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref,computed} from 'vue'
const url = ref('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')


const serviceList = computed(()=>{
	let arr = []
	props.list.forEach(item=>{
		if(typeof item.petNumMarkUp == 'string'){
			item.petNumMarkUp = JSON.parse(item.petNumMarkUp)
			item.petRangeMarkUp = JSON.parse(item.petRangeMarkUp)
		}
		arr.push(item)
	})
	return arr
})


const props: any = defineProps(['list','userId'])
//去下单
const toPaymentOrder = (id: string) => {
	uni.navigateTo({
		url: `/pages/serviceDetails/details/index?studioGoodsId=${id}${props.userId?'&userId='+props.userId:''}`
	})
}
</script>

<style lang="scss" scoped>
.service_item {
	width: 100%;
	padding: 32rpx;
	background: #ffffff;
	margin-bottom: 24rpx;
	box-sizing: border-box;
	border-radius: 24rpx;
	@include flex(center);
	image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 24rpx;
		border-radius: 24rpx;
	}
}
.detail {
	width: calc(100% - 224rpx);
	.name {
		color: #1b2120;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
	}
	.project {
		width: 100%;
		color: #808080;
		font-size: 24rpx;
		margin-bottom: 16rpx;
		@include flex(center);
		.label {
			width: 72rpx;
			margin-right: 8rpx;
		}
		.value {
			width: calc(100% - 80rpx);
		}
	}
	.btn {
		margin-top: 36rpx;
		@include flex(center, space-between);
		.price {
			color: #1b2120;
			font-size: 30rpx;
			font-weight: bold;
		}
		.to {
			width: 128rpx;
			height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			border-radius: 48rpx;
			@include flex(center, center);
			background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
		}
	}
}
</style>
